<template>
  <div class="animation-demo">
    <h2>Vue3动画示例</h2>
    
    <!-- 1. 基础过渡效果 -->
    <section class="demo-section">
      <h3>基础过渡</h3>
      <button @click="show = !show">切换显示</button>
      <Transition name="fade">
        <p v-if="show" class="demo-box">淡入淡出效果</p>
      </Transition>
    </section>

    <!-- 2. 列表过渡 -->
    <section class="demo-section">
      <h3>列表过渡</h3>
      <button @click="addItem">添加项目</button>
      <button @click="removeItem">删除项目</button>
      <TransitionGroup name="list" tag="ul">
        <li v-for="item in items" :key="item" class="list-item">
          {{ item }}
        </li>
      </TransitionGroup>
    </section>

    <!-- 3. 状态动画 -->
    <section class="demo-section">
      <h3>状态动画</h3>
      <div class="state-animation">
        <button @click="increment">增加数值 ({{ number }})</button>
        <div class="number-display">
          <TransitionGroup name="number" tag="span">
            <span v-for="n in numberArray" :key="n" class="number">
              {{ n }}
            </span>
          </TransitionGroup>
        </div>
      </div>
    </section>

    <!-- 4. 页面切换动画 -->
    <section class="demo-section">
      <h3>页面切换</h3>
      <div class="tabs">
        <button 
          v-for="tab in tabs" 
          :key="tab.id"
          @click="currentTab = tab.id"
          :class="{ active: currentTab === tab.id }">
          {{ tab.name }}
        </button>
      </div>
      <Transition name="slide" mode="out-in">
        <div :key="currentTab" class="tab-content">
          {{ tabs.find(tab => tab.id === currentTab)?.content }}
        </div>
      </Transition>
    </section>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 基础过渡
const show = ref(true)

// 列表过渡
const items = ref(['项目 A', '项目 B', '项目 C'])
const addItem = () => {
  const newItem = '项目 ' + String.fromCharCode(65 + items.value.length)
  items.value.push(newItem)
}
const removeItem = () => {
  if (items.value.length) {
    items.value.pop()
  }
}

// 状态动画
const number = ref(0)
const numberArray = computed(() => {
  return number.value.toString().split('')
})
const increment = () => {
  number.value += 1
}

// 页面切换
const currentTab = ref(1)
const tabs = [
  { id: 1, name: '首页', content: '这是首页内容' },
  { id: 2, name: '关于', content: '这是关于页面' },
  { id: 3, name: '联系', content: '这是联系页面' }
]
</script>

<style scoped>
.animation-demo {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.demo-section {
  margin-bottom: 40px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

button {
  margin: 8px;
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

.demo-box {
  margin-top: 10px;
  padding: 20px;
  background-color: #f0f0f0;
  border-radius: 4px;
}

/* 1. 淡入淡出过渡 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 2. 列表过渡 */
.list-item {
  margin: 4px 0;
  padding: 8px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.list-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

/* 3. 状态动画 */
.number-display {
  font-size: 24px;
  margin: 20px 0;
}

.number {
  display: inline-block;
  margin: 0 4px;
}

.number-enter-active,
.number-leave-active {
  transition: all 0.5s ease;
}

.number-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.number-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

/* 4. 页面切换 */
.tabs {
  margin-bottom: 16px;
}

.tabs button {
  background-color: #f0f0f0;
  color: #333;
}

.tabs button.active {
  background-color: #4CAF50;
  color: white;
}

.tab-content {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
}

.slide-enter-from {
  opacity: 0;
  transform: translateX(50px);
}

.slide-leave-to {
  opacity: 0;
  transform: translateX(-50px);
}
</style>
